<template>
  <div>
    <div v-show="!isUpdate">
      <el-descriptions title="用户信息" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            用户名
          </template>
          {{ user.username }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-phone"></i>
            电话
          </template>
          {{ user.tel }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location"></i>
            地址
          </template>
          {{ user.address }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-eleme"></i>
            真实姓名
          </template>
          {{ user.realname }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-check"></i>
            性别
          </template>
          {{ user.sex }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-time"></i>
            注册时间
          </template>
          {{ user.registration }}
        </el-descriptions-item>
      </el-descriptions>
      <el-button type="primary" style="float: right;margin: 20px 10px" @click="update">修改个人信息</el-button>
    </div>
    <div v-show="isUpdate">
      <el-form label-position="right" label-width="80px" :model="updateForm" ref="updateForm" :rules="rules">
        <el-form-item label="真实姓名" prop="realname">
          <el-input v-model="updateForm.realname"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-input v-model="updateForm.sex"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="updateForm.address"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="tel">
          <el-input v-model="updateForm.tel"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="float: right;margin-right: 20px;margin-left: 20px" @click="confirmUpdate()">确认修改</el-button>
          <el-button type="info" style="float: right" @click="back()">返回</el-button>
        </el-form-item>
      </el-form>


    </div>
  </div>
</template>

<script>
export default {
  name: "SelfMessage",
  data() {
    return {
      user: '',
      isUpdate: false,
      updateForm: {
        realname: '',
        sex: '',
        tel: '',
        address: ''
      },
      rules: {
        realname: [
          {max: 6, message: '长度过长', trigger: 'blur'}],
        sex: [
          {max: 3, message: '长度过长', trigger: 'blur'}],
        tel: [
          {max: 11, message: '手机号为11位', trigger: 'blur'}],
        address: [
          {max: 30, message: '长度过长', trigger: 'blur'}]
      },

    }
  },
  methods: {
    update() {
      this.isUpdate = true
    },
    back(){
      this.isUpdate = false
    },
    confirmUpdate(){
      if(this.beforeOperate()){
        this.$refs.updateForm.validate((valid) => {
          if (valid) {
            this.putRequest(this.$store.state.baseUrl+'/user/updateSelfMessage',{
              realname:this.updateForm.realname,
              sex:this.updateForm.sex,
              tel:this.updateForm.tel,
              address:this.updateForm.address,
              username:this.user.username,
              user_id:this.user.user_id
            }).then(resp => {
              this.$message({
                type:'success',
                message:'修改成功'
              });
              this.isUpdate = false;
              //修改成功后要更新sessionStorage里的内容
              this.getRequest(this.$store.state.baseUrl+'/user/getUser',{
                username:this.user.username,
                user_id:this.user.user_id
              }).then(resp => {
                this.user = resp.obj;
                window.sessionStorage.setItem("user",JSON.stringify(resp.obj));
              })
            })
          } else {
            this.$message({
              type:'error',
              message:"字段格式不正确"
            })
            return false;
          }
        });
      }else {
        this.$router.push("/userLogin");
        this.$message("请先登录")
      }
    }
  }
  ,
  mounted() {
    this.user = JSON.parse(window.sessionStorage.getItem("user"));
  }
  ,

}
</script>

<style scoped>

</style>
